<template>
  <div class="box">
    <div class="center test_center">
      <div class="left">
        <div class="left_title">
          <div>疾</div>
          <div>病</div>
          <div>自</div>
          <div>测</div>
        </div>
        <div class="left_div">
          <Search></Search>
          <!--  -->
          <div class="left_list">
            <div
              v-for="(item, index) in Name" :key="index" class="left_list_div">
              <router-link :to="{path:'/diseaseself',query:{id:item.id}}" class="link" >
                {{ item.name }}
              </router-link>
            </div>
          </div>
          <!-- 热点关键词 -->
          <div class="hot_title">热点关键词</div>
          <!--  -->
          <div class="hot">
            <div v-for="(item, index) in hot" :key="index" class="hot_list_div">
              <div class="hot_option_div">
                <router-link to="#" class="link">
                  {{ item.name }}
                </router-link>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--  -->
      <div class="content">
        <div class="content_title">
          <div class="left_title">
            <div>药</div>
            <div>食</div>
            <div>同</div>
            <div>源</div>
          </div>
          <div class="content_more">
            <div class="content_more_more">
              <router-link :to="{path:'/Medfood',query:{page:1}}" class="cont_more_link">
                查看更多
              </router-link>
            </div>
          </div>
        </div>
        <div class="content_cont">
          <div class="content_banner">
            <img src="../assets/10-2012121JF15T.png" />
          </div>
          <div class="content_text">
            <p class="content_text_title">{{ lala.title }}</p>
            <p class="content_text_text">
              {{ lala.content }}..
              <router-link :to="{path:'/Mfh',query:{id:1}}" class="cont_text_link">[详细]</router-link>
            </p>
          </div>
        </div>
        <div class="content_ul_div">
          <ul>
            <li v-for="(item, index) in cont_ul" :key="index">
              <router-link to="" class="cont_li_link">
                【 {{ item.title }}】{{ item.content }}
              </router-link>
            </li>
          </ul>
          <div class="content_foot_img">
            <div v-for="(item, index) in cont_ul" :key="index">
              <router-link to="">
                <img :src="item.thumb" />
              </router-link>
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="left_title">
          <div>药</div>
          <div>膳</div>
          <div>同</div>
          <div>源</div>
        </div>
        <div class="right_detail">
          <div class="right_detail_div">
            <img :src="img.thumb" />
          </div>
          <div class="right_detail_ul">
            <ul class="right_ul">
              <li v-for="(item, index) in right_list" :key="index">
                <span class="right_ul_tisp"></span>
                <router-link to="/" class="right_ul_li_link">{{
                  item.title
                }}</router-link>
              </li>
              <div class="right_ul_more">
                <router-link to="/Fooddiet" class="right_ul_link">
                  查看更多
                </router-link>
              </div>
            </ul>
            <!-- 查看更多 -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import Search from "@/components/Search.vue";
export default {
  components: {
    Search,
  },
  data() {
    return {
      Name: [],
      hot: [
        { name: "尿床，" },
        { name: "遗尿尘肺" },
        { name: "荨麻疹" },
        { name: "月经不调" },
        { name: "荨麻疹" },
        { name: "月经不调" },
        { name: "遗精滑精" },
        { name: "甲亢" },
      ],
      right_list: [],
      cont_ul: [],
      lala: {},
      img: {},
    };
  },
  created() {
    axios.get("/complex/yaoshi").then((res) => {
      this.lala = res.data.top[0];
      this.cont_ul = res.data.data;
    });
    axios.get("/complex/yaoshan").then((res) => {
      this.right_list = res.data.data;
      this.img = res.data.img[0];
    });
    axios.get('/zice/zice')
    .then((res)=>{this.Name=res.data.data})
  },
 
};
</script>

<style scoped>
.box {
  width: 100%;
  background-color: #fce7d6;
  padding-top: 50px;
  padding-bottom: 100px;
}
.test_center {
  display: flex;
  justify-content: space-evenly;
  padding: 100px 0;
  width: 1572px;
}
/* .test_center div{border:1px red solid;} */
.left {
  width: 370px;
}
.left_title {
  width: 100%;
  display: flex;
  justify-content: left;
  margin-bottom: 30px;
}
.left_title div {
  width: 70px;
  line-height: 70px;
  background-color: #a40100;
  text-align: center;
  font-size: 38px;
  font-family: "楷体";
  color: white;
  border-radius: 35px;
  margin-right: 10px;
}
.left_div {
  background: url(../assets/left_div_ba.png),
    url("../assets/bg.png") no-repeat 20px 323px;
  background-color: #fff5ee;
  height: 645px;
  overflow: hidden;
}
.search {
  margin: 61px auto 0;
}
.left_list {
  width: 256px;
  margin: 40px auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  text-align: center;
}
.left_list_div {
  width: 51.2px;
  height: 30px;
  margin-bottom: 10px;
}
.left_list_div a:hover {
  font-size: 20px;
  color: #9e290b;
}
.hot_title {
  text-align: center;
  font-size: 22px;
  font-weight: 600;
  color: #9e290b;
}
.hot {
  width: 234px;
  margin: 40px auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: content;
  text-align: center;
}
.hot_option_div {
  padding: 0 5px;
}
.hot_list_div {
  text-align: center;
  margin-bottom: 20px;
}
.hot_list_div a:hover {
  color: #9e290b;
}
.content {
  width: 630px;
}
.content_title {
  display: flex;
  justify-content: space-between;
}
.content_more_more {
  background-color: #a40100;
  width: 114px;
  padding: 10px 0;
  white-space: nowrap;
  border-radius: 25px;
  text-align: center;
  font-size: 18px;
  letter-spacing: 2px;
  margin-top: 20px;
}
.cont_more_link {
  color: white;
}
.content_cont {
  display: flex;
  justify-content: space-between;
  border-bottom: 2px #943e27 solid;
  padding-bottom: 38px;
}
.content_text_title {
  font-size: 20px;
  color: #9e290b;
  font-weight: 600;
}
.content_text_text {
  font-size: 18px;
  color: #666666;
  width: 430px;
  text-indent: 2rem;
  margin-top: 15px;
}
.cont_text_link {
  color: #9e290b;
}
.content_ul_div {
  margin-top: 33px;
}
.cont_li_link {
  color: #b35a43;
}
.content_ul_div ul li {
  font-size: 18px;
  letter-spacing: 1px;
  margin-bottom: 21px;
  height: 30px;
}
.content_ul_div ul li:hover {
  font-size: 20px;
  color: #b35a43;
  font-weight: 600;
}
.content_foot_img {
  display: flex;
  justify-content: space-between;
}
.content_foot_img div {
  width: 151px;
  height: 151px;
}
.content_foot_img div img {
  width: 100%;
}
.right_detail_div {
  width: 316px;
  height: 221px;
}
.right_detail_div img {
  width: 100%;
  width: 316px;
  height: 221px;
}
.right {
  width: 370px;
}
.right_ul_tisp {
  width: 18px;
  height: 18px;
  background-color: #a40000;
  border-radius: 9px;
  margin: 0 10px;
}
.right_ul_li_link {
  font-size: 18px;
  color: #666666;
}
.right_ul li {
  margin-top: 15px;
  display: flex;
  align-items: center;
  height: 30px;
}
.right_ul li a:hover {
  color: #9e290b;
  font-size: 20px;
  font-weight: 600;
}
.right_ul_more {
  background-color: #a40100;
  white-space: nowrap;
  border-radius: 25px;
  margin-left: 160px;
  text-align: center;
  font-size: 18px;
  letter-spacing: 2px;
  width: 114px;
  padding: 10px 0;
  margin-top: 20px;
}
.right_ul_link {
  color: white;
}
.link {
  color: #666666;
}
</style>
